<template>
  <div class="num">
    <div class="header">
      <a @click="goAreaRisk" class="btn" :class="title === '地区风险' ? 'hit' : ''">地区风险</a>
      <a @click="goCovNumber" class="btn" :class="title === '国内数据' ? 'hit' : ''">国内数据</a>
      <a @click="goGlobalNumber" class="btn" :class="title === '全球数据' ? 'hit' : ''">全球数据</a>
      <a @click="goVaccine" class="btn" :class="title === '新冠疫苗' ? 'hit' : ''">新冠疫苗</a>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
    import scrollJump from '../../hooks/scrollJump'

    export default {
        name: 'Category',
        props: {
            title: String
        },
        setup() {
            // 主页面标签滚动跳转
            const {goAreaRisk, goCovNumber, goGlobalNumber, goVaccine} = scrollJump()

            return {
                goAreaRisk,
                goCovNumber,
                goGlobalNumber,
                goVaccine
            }
        },
    }
</script>

<style lang="less" scoped>
    .num {
        background-color: #f5f5f5;
        padding-top: 0.3rem;
        .content {
            padding: 0.2rem;
            background: #fff;
        }
        
        .header {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #e6edff;
            border-radius: 0.2rem 0.2rem 0 0;
            color: #404a60;
            font-size: 0.27rem;
            font-weight: 500;
            .btn {
                width: 24%;
                height: 0.65rem;
                text-align: center;
                line-height: 0.65rem;
                
            }   
        }

        .hit {
            color: #4169e2;
            background-color: #fff;
            border-radius: 0.2rem 0.2rem 0 0;
        }
    }
</style>